<template>
  <div>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        <img
          @click="changeScreen"
          src="@/assets/exitScreen.svg"
          alt="缩小"
          title="缩小"
          class="internation"
          v-if="fullScreen"
        />
        <img
          @click="changeScreen"
          v-else
          src="@/assets/overBig.svg"
          alt="放大"
          title="放大"
          class="internation"
        />
        <img
          @click="changeLanguage"
          src="@/assets/internation.svg"
          alt="国际化"
          title="国际化"
          class="internation"
        />
        <el-image class="photo" fit="fill" :src="url" />
        <span>
          {{ $t("欢迎") }} {{ userInfo.username }}
          <el-icon><ArrowDown /></el-icon>
        </span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>{{ $t("修改密码") }} </el-dropdown-item>
          <el-dropdown-item>{{ $t("编辑信息") }} </el-dropdown-item>
          <el-dropdown-item @click="logout">{{ $t("注销") }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { SetLocal, GetLocal } from 'Utils';
import photo from '@/assets/photo.webp'
import { reactive, ref } from 'vue';
import { setLanguage, getLanguage, removeLanguage, getUserInfo } from "Utils/cookies";
import router from '@/router';

const userInfo = reactive(getUserInfo())

const url = ref(photo)
const name = ref('admin');
const fullScreen = ref(false)
SetLocal('box', { a: 1 })
console.log('网址', router);
//登出
const logout = () => {
  ElMessageBox.confirm(
    '确认退出登录?',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      router.push('/login');
    })
}

const changeLanguage = (e) => {
  e.stopPropagation();
  if (!getLanguage()) {
    setLanguage("en");
  } else {
    removeLanguage();
  }
  router.go(0)
};

const changeScreen = (e) => {
  e.stopPropagation();
  const element = document.documentElement;

  if (!document.fullscreenElement) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
    fullScreen.value = true;
  } else {
    document.exitFullscreen();
    fullScreen.value = false;
  }

}


</script>

<style lang="less" scoped>
@import url("./index.less");
</style>